<template>
    <div>
      <h1>房型列表</h1>
      房型名称:<input type="text" v-model="info.HtName">
      <input type="button" value="查询" class="btn btn-primary" @click="show">
      <input type="button" value="批量删除" class="btn btn-danger"  @click="Delall">
      <input type="button" value="批量上架" class="btn btn-info"  @click="UpSJ">
      <input type="button" value="批量下架" class="btn btn-info"  @click="UpXJ">
      <table class="table table-bordered">
        <tbody>
            <tr class="bg-primary">
                <td>
                    <input type="checkbox" v-model="checked" @click="checkall">全选/全不选
                </td>
                <td>编号</td>
                <td>房型名称</td>
                <td>房型图片</td>
                <td>价格</td>
                <td>面积</td>
                <td>是否有窗</td>
                <td>简介</td>
                <td>是否可以加床</td>
                <td>最多入住人数</td>
                <td>是否含早餐</td>
                <td>房间状态</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in data.list":key="item.Id">
                <td>
                    <input type="checkbox" v-model="sid" :value="item.Id" @change="checkone">
                </td>
                <td>{{item.Id}}</td>
                <td>{{item.HtName}}</td>
                <td><a :href="item.Photo">查看</a></td>
                <!-- <td><img :src="item.Photo" width="50" height="50"></td> -->
                <td style="color: red;">¥{{item.Money}}</td>
                <td>{{item.Area}}平方米</td>
                <td>{{item.IsWin==1?'是':'否'}}</td>
                <td>{{item.Desc}}</td>
                <td>{{item.iSBed==1?'可以':'不可以'}}</td>
                <td>{{item.PeopleCount}}人</td>
                <td>{{item.IsBreakFast==1?'包含':'不包含'}}</td>
                <td style="color: blue;">{{item.State==1?'上架':'下架'}}</td>
                <td>
                    <input type="button" value="编辑" class="btn btn-success" @click="update(item.Id)">
                    <input type="button" value="删除" class="btn btn-danger" @click="Delhouse(item.Id)">
                    <input type="button" value="上架" class="btn btn-info" v-if="item.State==0" @click="Upstate(item.Id)">
                    <input type="button" value="下架" class="btn btn-info" v-if="item.State==1" @click="Upstate(item.Id)">
                </td>
            </tr>
        </tbody>
      </table>

      <span>共<b style="color: red;">{{data.totalCount}}</b>条</span>
      <span>每页<b style="color: red;">{{info.pagesize}}</b>条</span>
      <span>共<b style="color: red;">{{info.pageindex}}/{{data.totalPage}}</b>页</span>

      <input type="button" value="首页" @click="Fenpae(1)">
      <input type="button" value="上一页" @click="Fenpae(info.pageindex-1)">
      <span v-for="item in data.totalPage" @click="Fenpae(item)">{{item}}</span>
      <input type="button" value="下一页" @click="Fenpae(info.pageindex+1)">
      <input type="button" value="尾页" @click="Fenpae(data.totalPage)">

      <input type="number" v-model="info.pageindex">
      <input type="button" value="跳转" @click="Fenpae(info.pageindex)">

      页容量<select v-model="info.pagesize" @change="show">
        <option v-for="item in arr" :value="item">每页{{item}}页</option>
      </select>

    </div>
</template>

<script setup lang="ts">
//响应式数据
import {ref,reactive,onMounted} from 'vue';
import axios from 'axios';
import moment from 'moment';
//跳转
import {useRouter,useRoute} from 'vue-router';
const router=useRouter();
const route=useRoute();

let info:any=reactive({
    pageindex:1,
    pagesize:2,
    HtName:'',
})

let data:any=reactive({
    totalCount:0,
    totalPage:0,
    list:[],
})

onMounted(()=>{
    gethouse();
})
//================分页=================
const Fenpae=(num:any)=>{
    if(num>=1 && num<=data.totalPage){
        info.pageindex=num;
        gethouse();
    }
    else{
        alert('超出页码范围');
        return;
    }
}
let arr:any=ref([2,3,4,5,6]);
//让回到第一页
const show=()=>{
    info.pageindex=1;
    gethouse();
}
//================列表==============
const gethouse=()=>{
    axios({
        url:'https://localhost:7193/api/House/Gethouselist',
        method:'get',
        params:info,
    })
    .then(res=>{
        console.log(res);
        Object.assign(data,res.data);
    })
}
//=====================删除================
const Delhouse=(id:any)=>{
    if(confirm('确认删除吗？')){
        axios({
            url:'https://localhost:7193/api/House/DelHouse',
            method:'delete',
            params:{
                id:id
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功');
                gethouse();
            }
            else{
                alert('删除失败');
            }
        })
    }
}
//===================修改===============
const update=(id:any)=>{
    router.push({
        path:'/houseupdate',
        query:{
            id:id
        }
    })

}
//==================修改状态==================

const Upstate=(id:any)=>{
    axios({
        url:'https://localhost:7193/api/House/UpState',
        method:'put',
        params:{
            id:id
        }
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert('修改成功');
            gethouse();
        }
        else{
            alert('修改失败')
        }
    })
}
//=====================全选/反选===============
let checked:any=ref(false);

let sid:any=ref([]);

//全选
const checkall=()=>{
    //切换全选按钮选中状态(取反操作)
    checked.value=!checked.value;
    //如果全选按钮被选中
    if(checked.value==true){
        //收集data.list中每条复选数据的Id值放大sid中(复选框按钮被勾选)
        sid.value=data.list.map((item:any)=>{
            return item.Id;
        })
    }
    //否则sid的值为空
    else{
        sid.value=[];
    }
}
//反选
const checkone=()=>{
    if(sid.value.length==data.list.length){
        checked.value=true;
    }
    else{
        checked.value=false;
    }
}
//===================批量删除==================
const Delall=()=>{
    if(confirm('确认删除吗')){
        axios({
            url:'https://localhost:7193/api/House/DelAllhouse',
            method:'delete',
            params:{
                id:sid.value.toString(),
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功');
                checked.value=false;
                gethouse();

            }
            else{
                alert('删除失败');
                checked.value=false;
            }
        })
    }
}
//===================批量上架===========
const UpSJ=()=>{
    axios({
        url:'https://localhost:7193/api/House/UpallSJ',
        method:'put',
        params:{
            id:sid.value.toString(),
        }
    })
    .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('修改成功');
                checked.value=false;
                sid.value=[],
                gethouse();

            }
            else{
                alert('修改失败');
                checked.value=false;
                sid.value=[]
            }
        })
}
//===============批量下架===============
const UpXJ=()=>{
    axios({
        url:'https://localhost:7193/api/House/UpallXJ',
        method:'put',
        params:{
            id:sid.value.toString(),
        }
    })
    .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('修改成功');
                checked.value=false;
                sid.value=[],
                gethouse();

            }
            else{
                alert('修改失败');
                checked.value=false;
                sid.value=[]
            }
        })
}
</script>

<style scoped>
span{
    margin: 0 10px;
}
input{
    margin: 0 10px;
}
</style>